<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        欢迎界面
    </title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no" name="format-detection">
    <link href="css/main.css" media="all" rel="stylesheet">
    <link href="lib/bootstrap/css/bootstrap.css" media="all" rel="stylesheet">
    <link href="lib/bootstrap/js/bootstrap.min.js" media="all" rel="stylesheet">
</head>

<body>
<style type="text/css">
    legend {
        display: block;
        width: 100px;
        border-bottom: 0px;
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }

    legend a {
        color: #666;
    }

    legend a:hover {
        text-decoration: none;
    }

    .layui-table {
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }
</style>
<div class="x-body">
    <!-- <blockquote class="layui-elem-quote">
        欢迎使用小区物业管理系统！<span class="f-14">v1.0</span> &nbsp;&nbsp;登录次数：520
    </blockquote> -->
    <!--    <div class="row">-->
    <!--        <div class="col-xs-6 col-sm-4 col-md-3">-->
    <!--            <section class="panel">-->
    <!--                <div class="symbol bgcolor-blue"><i class=" iconfont icon-dashaxiaoqudizhi01"></i>-->
    <!--                </div>-->
    <!--                <div bind="1" class="value tab-menu">-->
    <!--                    <a data-parent="true" data-title="总栋数" data-url="user-info.html" href="javascript:;"><i-->
    <!--                            class="iconfont " data-icon=""></i>-->
    <!--                        <h1 id="buildsCount">45</h1>-->
    <!--                    </a>-->

    <!--                    <a data-parent="true" data-title="总栋数" data-url="user-info.html" href="javascript:;"> <i-->
    <!--                            class="iconfont " data-icon=""></i><span>总栋数</span></a>-->

    <!--                </div>-->
    <!--            </section>-->
    <!--        </div>-->
    <!--        <div class="col-xs-6 col-sm-4 col-md-3">-->
    <!--            <section class="panel">-->
    <!--                <div class="symbol bgcolor-commred"><i class="iconfont icon-lvhuaxiaoqu"></i>-->
    <!--                </div>-->
    <!--                <div bind="1" class="value tab-menu">-->
    <!--                    <a data-parent="true" data-title="总户数" data-url="user-info.html" href="javascript:;"> <i-->
    <!--                            class="iconfont " data-icon=""></i>-->
    <!--                        <h1 id="ownerCount">600</h1>-->
    <!--                    </a>-->

    <!--                    <a data-parent="true" data-title="总户数" data-url="user-info.html" href="javascript:;"> <i-->
    <!--                            class="iconfont " data-icon=""></i><span>总业主数</span></a>-->

    <!--                </div>-->
    <!--            </section>-->
    <!--        </div>-->

    <!--        <div class="col-xs-6 col-sm-4 col-md-3">-->
    <!--            <section class="panel">-->
    <!--                <div class="symbol bgcolor-dark-green"><i class="iconfont icon-yezhuxian"></i>-->
    <!--                </div>-->
    <!--                <div bind="1" class="value tab-menu">-->
    <!--                    <a data-parent="true" data-title="总人数" data-url="user-info.html" href="javascript:;"> <i-->
    <!--                            class="iconfont " data-icon=""></i>-->
    <!--                        <h1 id="stuffCount">8310</h1>-->
    <!--                    </a>-->
    <!--                    <a data-parent="true" data-title="总人数" data-url="user-info.html" href="javascript:;"> <i-->
    <!--                            class="iconfont " data-icon=""></i><span>总工人人数</span></a>-->
    <!--                </div>-->
    <!--            </section>-->
    <!--        </div>-->

    <!--        <div class="col-xs-6 col-sm-4 col-md-3">-->
    <!--            <section class="panel">-->
    <!--                <div class="symbol bgcolor-yellow-green"><i class="layui-icon" style="top: 3px;">&#xe613;</i>-->
    <!--                </div>-->
    <!--                <div bind="1" class="value tab-menu">-->
    <!--                    <a data-parent="true" data-title="租户数量" data-url="user-info.html" href="javascript:;"> <i-->
    <!--                            class="iconfont " data-icon=""></i>-->
    <!--                        <h1 id="allCount">1314</h1>-->
    <!--                    </a>-->
    <!--                    <a data-parent="true" data-title="租户数量" data-url="user-info.html" href="javascript:;"> <i-->
    <!--                            class="iconfont " data-icon=""></i><span>总人数</span></a>-->
    <!--                </div>-->
    <!--            </section>-->
    <!--        </div>-->
    <!--    </div>-->

    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="default">信息统计</a></legend>
    </fieldset>

    <!--相关统计-->
    <div class="row">
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">最新公告</div>
                <div class="panel-body">
                    <ul class="list-group clear-list m-t" id="noticesUl">
                    </ul>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">保洁工单</div>
                <div class="panel-body">
                    <ul class="list-group clear-list m-t" id="repairCount">
                    </ul>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">维修工单</div>
                <div class="panel-body">
                    <ul class="list-group clear-list m-t" id="showComplaint">
                    </ul>
                </div>
            </section>
            <!--            底部高度不够,需要撑开-->
            <p style="height: 100px">

            </p>
        </div>

    </div>

    <script charset="utf-8" src="lib/layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <!--    <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据

            let date = '2020-03-025';
            option = {
                tooltip: {
                    trigger: 'axis',
                    formatter(params) {
                        return `<div>${date} ${params[0].axisValue}<br/>${params[0].seriesName}：${params[0].value}<br/>${params[1].seriesName}：${params[1].value}%</div>`
                    }
                },
                legend: {
                    color: ["#13C7F2", "#F9CE81"],
                    data: ['投诉（次）', '业主满意度'],
                    icon: 'rect',
                    itemWidth: 18,
                    itemHeight: 2,
                    itemGap: 13,
                    right: '4%',
                    textStyle: {
                        fontSize: 12,
                        color: '#23b7e5'
                    }
                },
                grid: {
                    top: 'middle',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    height: '80%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: "#23b7e5",
                        }
                    },
                    axisLabel: {
                        color: '#23b7e5',
                        fontWeight: 'bold'
                    },
                    axisTick: {
                        show: false,
                    },
                    axisPointer: {
                        lineStyle: {
                            color: '#D11F1F'
                        }
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: 'solid',
                            color: '#23b7e5',
                            width: 2
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#23b7e5",
                        },
                    },
                    axisLabel: {
                        formatter: '{value}%',
                        fontWeight: 'bold'
                    },
                    splitArea: {
                        show: false
                    },
                },
                series: [{
                    name: '投诉（次）',
                    type: 'line',
                    symbol: 'none',
                    data: [{
                        value: 10,
                        symbolSize: 10,
                        symbol: 'emptyCircle'
                    }, 20, 45, 15, {
                        value: 90,
                        symbolSize: 10,
                        symbol: 'emptyCircle'
                    }, 20, 10, 80, 50, {
                        value: 100,
                        symbolSize: 10,
                        symbol: 'emptyCircle'
                    }, 10, {
                        value: 40,
                        symbolSize: 10,
                        symbol: 'emptyCircle'
                    }],
                    color: "#13C7F2",
                    lineStyle: {
                        normal: {
                            width: 2.5,
                            color: '#13C7F2',
                        }
                    },
                    hoverAnimation: false,
                    smooth: true,
                }, {
                    name: '业主满意度',
                    type: 'line',
                    symbol: 'none',
                    data: [{
                        value: 20,
                        symbolSize: 10,
                        symbol: 'emptyCircle'
                    }, 30, 70, 10, {
                        value: 50,
                        symbolSize: 10,
                        symbol: 'emptyCircle'
                    }, 100, 50, 20, 90, {
                        value: 30,
                        symbolSize: 10,
                        symbol: 'emptyCircle'
                    }, 50, {
                        value: 90,
                        symbolSize: 10,
                        symbol: 'emptyCircle'
                    }],
                    color: "#F9CE81",
                    lineStyle: {
                        normal: {
                            width: 2.5,
                            color: '#F9CE81',
                        }
                    },
                    hoverAnimation: false,
                    smooth: true,
                }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
        <script type="text/javascript">
            // 指定图表的配置项和数据
            var myChart = echarts.init(document.getElementById('area'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '小区人数统计',
                    subtext: '（人）',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                itemStyle: {

                    normal: {

                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                        color: function (params) {

                            // build a color map as your need.

                            var colorList = [

                                '#27C24C', '#F05050', '#23b7e5', '#7266ba', '#18bc9c',

                                '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',

                                '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'

                            ];

                            return colorList[params.dataIndex]

                        },

                        //以下为是否显示，显示位置和显示格式的设置了

                        label: {

                            show: true,

                            position: 'top',

                            //                             formatter: '{c}'

                            formatter: '{b}\n{c}'

                        }

                    }

                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['A区', 'B区', 'C区', 'D区', 'E区']
                },
                series: [{
                    name: '小区租户人数',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 6335, name: 'A区'},
                        {value: 4310, name: 'B区'},
                        {value: 2310, name: 'C区'},
                        {value: 3310, name: 'D区'},
                        {value: 9310, name: 'E区'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            myChart.currentIndex = -1;
            setInterval(function () {
                var dataLen = option.series[0].data.length;
                /*console.log(dataLen);*/
                // 取消之前高亮的图形
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: myChart.currentIndex
                });
                myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
                // 高亮当前图形
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: myChart.currentIndex
                });
            }, 1000);

            // 使用刚指定的配置项和数据显示图表。
            /*myChart.setOption(option);*/
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        </script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('years'));


            //var myChart = echarts.init(document.getElementById('chart2'));

            var ydata = [{
                name: 'A区车位',
                value: 18
            },
                {
                    name: 'B区车位',
                    value: 16
                },
                {
                    name: 'C区车位',
                    value: 15
                },
                {
                    name: 'D区车位',
                    value: 14
                },
                {
                    name: 'E区车位',
                    value: 10
                }
            ];
            var color = ["#8d7fec", "#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"]
            var xdata = ['A区车位', "B区车位", "C区车位", "D区车位", 'E区车位'];


            option = {
                /*backgroundColor: "rgba(255,255,255,1)",*/
                color: color,
                legend: {
                    orient: "vartical",
                    x: "left",
                    top: "center",
                    left: "53%",
                    bottom: "0%",
                    data: xdata,
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: '#000'
                    },
                    /*itemGap: 16,*/
                    /*formatter:function(name){
                      var oa = option.series[0].data;
                      var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value+oa[4].value + oa[5].value + oa[6].value + oa[7].value+oa[8].value + oa[9].value ;
                      for(var i = 0; i < option.series[0].data.length; i++){
                          if(name==oa[i].name){
                              return ' '+name + '    |    ' + oa[i].value + '    |    ' + (oa[i].value/num * 100).toFixed(2) + '%';
                          }
                      }
                    }*/

                    formatter: function (name) {
                        return '' + name
                    }
                },
                series: [{
                    type: 'pie',
                    clockwise: false, //饼图的扇区是否是顺时针排布
                    minAngle: 2, //最小的扇区角度（0 ~ 360）
                    radius: ["20%", "60%"],
                    center: ["30%", "45%"],
                    avoidLabelOverlap: false,
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: '#ffffff',
                            borderWidth: 1,
                        },
                    },
                    label: {
                        normal: {
                            show: false,
                            position: 'center',
                            formatter: '{b}\n{c} ({d}%)',
                            rich: {
                                text: {
                                    color: "#fff",
                                    fontSize: 14,
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    padding: 8
                                },
                                value: {
                                    color: "#8693F3",
                                    fontSize: 24,
                                    align: 'center',
                                    verticalAlign: 'middle',
                                },
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: 24,
                            }
                        }
                    },
                    data: ydata
                }]
            };
            myChart.setOption(option);
            myChart.currentIndex = -1;

            setInterval(function () {
                var dataLen = option.series[0].data.length;
                // 取消之前高亮的图形
                myChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: myChart.currentIndex
                });
                myChart.currentIndex = (myChart.currentIndex + 1) % dataLen;
                // 高亮当前图形
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: myChart.currentIndex
                });
            }, 1000);

            // 使用刚指定的配置项和数据显示图表。
            /*myChart.setOption(option);*/
            window.addEventListener("resize", function () {
                myChart.resize();
            });
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>-->

</div>
</body>
<script src="js/request.js"></script>
<script>
    var baseUrl = 'http://localhost:8080'
    $(function () {
        /*        // 总栋数统计
                $.ajax({
                    method: 'post',
                    url: '/admin/stuff/builds/count',
                    success: function (res) {
                        // console.log(res)
                        if (res.code === 200) {
                            $('#buildsCount').html(res.data)
                        }
                    }
                })
                //     总户数统计
                let ownerCount;
                $.ajax({
                    method: 'get',
                    url: '/admin/owner/count',
                    success: function (res) {
                        // console.log(res)
                        if (res.code === 200) {
                            ownerCount = res.data;
                            $('#ownerCount').html(res.data)
                        }
                    }
                })
                //     总工人数统计
                let stuffCount;
                $.ajax({
                    method: 'post',
                    url: '/admin/stuff/count',
                    success: function (res) {
                        // console.log(res)
                        if (res.code === 200) {
                            stuffCount = res.data;
                            $('#stuffCount').html(res.data)
                            $('#allCount').html(ownerCount + stuffCount)
                        }
                    }
                })*/
        //     公告栏展示
        $.ajax({
            method: 'get',
            url: '/notices/all',
            success: function (res) {
                let temp = ``;
                for (let i = 0; i < res.data.length; i++) {
                    let notice = res.data[i];
                    temp += `<li class="list-group-item fist-item"><span class="float-right"> ${formatDate(notice.publishTime)} </span> <span
                                class="label label-success">${i + 1}</span> ${notice.title}
                        </li>`;
                }
                $('#noticesUl').html(temp);
            }
        })

        //      保洁工单

        // 未完成报修单
        $.ajax({
            method: 'get',
            url: '/cleaningOrders/work-orders',
            data: {
                staff_id: sessionStorage.getItem('userId')  // 添加staff_id参数
            },
            dataType: "json",
            success: function (res) {
                let repair = ``;
                console.log("保洁工单")
                console.log(res)
                if (res.code === 200) {
                    $.each(res.data.orders, function (index, item) {
                        // repair += `<li class="list-group-item"> <span class="float-right"> ${formatDate(item.dispatchTime)} &nbsp;<b
                        //         style="color: #2fb9d4">${item.status == 0 ? "未完成" : "已完成"}</b></span> <span class="label label-danger">${index + 1}</span>
                        //     ${item.faultDesc}
                        //             </li>`
                        repair += `<li class="list-group-item"> <span class="float-right"> ${formatDate(item.dispatchTime)} &nbsp;<b
                                style="color: ${item.status == 0 ? '#FF5722' : '#4CAF50'}">${item.status == 0 ? "未完成" : "已完成"}</b></span> <span class="label label-danger">${index + 1}</span>
                                    ${item.buildingId + "号楼"}
                                    </li>`
                    })
                    $('#repairCount').html(repair)
                }
            }
        })
        /*        // 已完成报修单
                $.ajax({
                    method: 'get',
                    url: '/maintenance/completedOrders',
                    success: function (res) {
                        // console.log(res)
                        if (res.code === 200) {
                            flag = true
                            $.each(res.data, function (index, item) {
                                repair += `<li class="list-group-item"> <span class="float-right"> ${formatDate(item.dispatchTime)} &nbsp;<b
                                        style="color: #FF5722">${item.status == 1 ? "未完成" : "已完成"}</b></span> <span class="label label-danger">${repairLength + index + 1}</span>
                                    ${item.faultDesc}
                                            </li>`
                            })
                        } else {
                            flag = false;
                        }
                        if (flag) {
                            $('#repairCount').html(repair)
                        }
                    }
                })*/
        // 测试
        /*        let incompleteRepair = $.ajax({
                    method: 'get',
                    url: baseUrl + '/maintenance/assignedOrders'
                });
                let completeRepair = $.ajax({
                    method: 'get',
                    url: baseUrl + '/maintenance/completedOrders'
                });
                $.when(incompleteRepair, completeRepair)
                    .then(function (res1, res2) {
                        console.log(res1, res2)
                        // if (res1[0].code === 200 && res2[0].code === 200) {
                        $.each(res1[0].data, function (index, item) {
                            repair += `<li class="list-group-item"> <span class="float-right"> ${formatDate(item.dispatchTime)} &nbsp;<b
                                        style="color: #2fb9d4">${item.status == 1 ? "未完成" : "已完成"}</b></span> <span class="label label-danger">${index + 1}</span>
                                    ${item.faultDesc}
                                            </li>`
                        });
                        repairLength = res1[0].data.length;
                        $.each(res.data, function (index, item) {
                            repair += `<li class="list-group-item"> <span class="float-right"> ${formatDate(item.dispatchTime)} &nbsp;<b
                                        style="color: #FF5722">${item.status == 1 ? "未完成" : "已完成"}</b></span> <span class="label label-danger">${repairLength + index + 1}</span>
                                    ${item.faultDesc}
                                            </li>`
                        })
                        // }
                        $('#repairCount').html(repair)
                    });*/
        // 测试
        //     维修工单
        $.ajax({
            method: 'get',
            url: '/maintenance/work-orders',
            data: {
                staff_id: sessionStorage.getItem('userId')  // 添加staff_id参数
            },
            dataType: "json",
            success: function (res) {
                let temp = ``;
                if (res.code === 200) {
                    for (let i = 0; i < res.data.length; i++) {
                        let complaint = res.data[i];
                        temp += `<li class="list-group-item"> <span class="float-right"> ${formatDate(complaint.dispatchTime)} &nbsp;<b
                                        style="color: ${complaint.status == 0 ? '#FF5722' : '#4CAF50'}">${complaint.status == 0 ? "未受理" : "已完成"}</b></span> <span class="label label-danger">${i + 1}</span>
                                    ${complaint.faultDesc}
                            </li>`

                    }
                }
                $('#showComplaint').html(temp)
            }
        })
    })

    //     格式化日期方法
    function formatDate(dateStr) {
        if (dateStr == null) {
            return "";
        }
        const date = new Date(dateStr);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }
</script>
</html>